
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>HTML5悬浮音乐播放器插件 | music</title>
<meta name="generator" content="Jekyll v3.9.3" />
<meta property="og:title" content="HTML5悬浮音乐播放器插件" />
<meta property="og:locale" content="en_US" />
<link rel="canonical" href="https://cenguigui.gitee.io/html5-music-player/" />
<meta property="og:url" content="https://cenguigui.gitee.io/html5-music-player/" />
<meta property="og:site_name" content="music" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="HTML5悬浮音乐播放器插件" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","headline":"HTML5悬浮音乐播放器插件","name":"music","url":"https://cenguigui.github.io/music/"}</script>
<!-- End Jekyll SEO tag -->

    <link rel="stylesheet" href="./css/style.css">
    <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->

<!-- Setup Google Analytics -->



<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="/music/favicon.ico" -->

<!-- end custom head snippets -->

  </head>
  <body>
    <div class="container-lg px-3 my-5 markdown-body">
      
      <h1><a href="https://cenguigui.gitee.io/html5-music-player/">music</a></h1>
      

      <h1 id="html5悬浮音乐播放器插件">HTML5悬浮音乐播放器插件</h1>

<h4 id="介绍">介绍</h4>

<p>gui-MusicPlayer.js插件是一款由小枫开发的开源式的HTML5悬浮音乐播放器插件，由原生JS开发无任何依赖，引入两行代码就能给网页添加漂亮的音乐播放器！改播放器目前有6种不同颜色的主题样式可任意切换 + 3种获取音乐的方式！</p>

<p>注意：该插件代码有用到ES6语法和css3新特性，如果你使用浏览器内核还是IE10以下，那请回避吧~</p>

<p><strong>演示站</strong> 
https://y.cenguigui.cn/YYDS/musicPlayer/</p>

<h3 id="开源地址">开源地址：</h3>
<p>https://gitee.com/cenguigui/html5-music-player</p>

<h4 id="展示图">展示图</h4>

<p><img src="https://www.cenguigui.cn/usr/uploads/2023/08/2818457527.png" alt="gui-MusicPlayer-pic" /></p>

<h4 id="获取音乐方式">获取音乐方式</h4>

<ol>
  <li>获取网易云【热歌榜, 新歌榜, 飙升榜, 原创榜】默认为热歌榜（每周二0:20每个歌榜更新100首音乐，vip歌曲自动跳过）。</li>
  <li>通过网易云的歌单id获取该歌单所有音乐。（注意：不支持解析VIP音乐）</li>
  <li>自定义音乐，通过修改 playlistData.json 文件自定义歌曲，相对来说比较繁琐，如果你要自定义音乐推荐上面的方式。</li>
</ol>

<h4 id="文本教程">文本教程</h4>

<p>如果你用过笒鬼鬼音乐播放器 y.cenguigui.cn 再用这个插件那你不用看可直接上手。
代码放到<code class="language-plaintext highlighter-rouge">&lt;/body&gt;</code>的上面即可</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;!DOCTYPE html&gt; // html5声明
&lt;html lang="en"&gt; // 网页声明 zh-CN指的是中文 cn就是英文
    &lt;head&gt; // 头部标签 ==&gt; 指的是头部标签开始
        &lt;meta charset="UTF-8"&gt; // 声明字符编码
        &lt;title&gt;Document&lt;/title&gt; // 网页标题
    &lt;/head&gt; // 头部结尾标签 ==&gt; 指的是头部标签结束
    
    &lt;body&gt; // 页面主体开始
    
            中间的是网页其他的内容代码
    
            &lt;!-- 这里就是显示网页内容的地方，也就是放播放器代码的地方！ --&gt;
            &lt;div id="gui-MusicPlayer" data-cdnName="https://y.cenguigui.cn/js"&gt;&lt;/div&gt;
            &lt;script src="https://y.cenguigui.cn/js/gui-MusicPlayer/js/gui-MusicPlayer.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt; // 页面主体结束
&lt;/html&gt; // 结尾
</code></pre></div></div>

<ul>
  <li>俺用的是以下的：</li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;demo&lt;/title&gt;
    &lt;link rel="shortcut icon" href="https://y.cenguigui.cn/lihua/image/logo.jpg" type="image/x-icon"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!--注释，加载黑胶vip热歌榜，设置cdn引入的路径，选择播放器颜色，随机播放器歌曲，让播放器淡出--&gt;
    &lt;div id="gui-MusicPlayer" data-songChart="黑胶vip热歌榜" data-cdnName="https://y.cenguigui.cn/js" data-themeColor="gui-wineRed" data-random="true" data-fadeOutAutoplay&gt;&lt;/div&gt;
    &lt;script src="https://y.cenguigui.cn/js/gui-MusicPlayer/js/gui-MusicPlayer.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div></div>

<ul>
  <li>方法一：直接引入插件CDN，复制下面的代码就能直接使用（注意data-cdnName的属性不能删除）</li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;!-- 配置播放器 --&gt;
&lt;div id="gui-MusicPlayer" data-cdnName="https://y.cenguigui.cn/js"&gt;&lt;/div&gt;

&lt;!-- 引入外部CDN插件 --&gt;
&lt;script src="https://y.cenguigui.cn/js/gui-MusicPlayer/js/gui-MusicPlayer.min.js"&gt;&lt;/script&gt;
</code></pre></div></div>

<ul>
  <li>方法二：插件下载到本地运行（注意引入正确的插件路径）</li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;!-- 配置播放器 --&gt;
&lt;div id="gui-MusicPlayer"&gt;&lt;/div&gt;

&lt;!-- 引入插件 --&gt;
&lt;script src="/gui-MusicPlayer/js/gui-MusicPlayer.min.js"&gt;&lt;/script&gt;
</code></pre></div></div>

<p><strong>全局属性配置</strong></p>

<ol>
  <li>id=”gui-MusicPlayer”属性：初始化音乐播放器 【必填】</li>
</ol>

<p>示例代码：</p>

<p>也可以把id换成class，但是只能存在一个</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"&gt;&lt;/div&gt;
</code></pre></div></div>

<ol>
  <li>data-cdnName属性：自定义CDN域名 data-cdnName=”http:// + cdn域名 + 路径”，后面不加/，和你添加js插件的路径一样否则网页样式全部失效！【选填】</li>
</ol>

<p>示例代码：</p>

<p>比如你CDN的路径是：https://y.cenguigui.cn/js/gui-MusicPlayer/js/gui-MusicPlayer.min.js</p>

<p>那下面的data-filePath属性就要和上面的一样</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer" data-cdnName="https://y.cenguigui.cn/js"&gt;&lt;/div&gt;
</code></pre></div></div>

<ol>
  <li>data-filePath属性：如果你本地修改了插件的文件路径就必须使用这个属性，和你添加js插件的路径一样否则网页样式全部失效！【选填】</li>
</ol>

<p>示例代码：</p>

<p>比如你插件的路径是：/zdy/music/gui-MusicPlayer/js/gui-MusicPlayer.min.js</p>

<p>那下面的data-filePath属性就要和上面的一样</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer" data-filePath="/zdy/music/"&gt;&lt;/div&gt;
</code></pre></div></div>

<ol>
  <li>data-fadeOutAutoplay属性：自动淡出音乐播放器，默认不淡出，后面不跟参数【选填】</li>
</ol>

<p>示例代码：</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"  data-fadeOutAutoplay&gt;&lt;/div&gt;
</code></pre></div></div>

<ol>
  <li>data-themeColor属性：切换播放器主题颜色【gui-original（默认主题），gui-sky（天空），gui-orange（橙子），gui-darkGreen（墨绿），gui-wineRed（酒红），gui-girlPink（少女粉）】【选填】</li>
</ol>

<p>示例代码：</p>

<p>如果你啥也不添加那就是默认主题颜色样式，下面是更换少女粉主题示例</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"  data-themeColor="gui-girlPink"&gt;&lt;/div&gt;
</code></pre></div></div>

<p>6. data-random属性：打开页面随机返回一个歌曲，也可以用来定义从哪首歌开始播放</p>
<p>随机播放示例：</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"  data-random="true"&gt;&lt;/div&gt;
</code></pre></div></div>
<p>自定义播放器歌曲数值（演示第3首）示例：</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"  data-random="3"&gt;&lt;/div&gt;
</code></pre></div></div>

<h4 id="网易云接口版属性配置不能解析vip歌曲">网易云接口版属性配置（不能解析VIP歌曲）</h4>

<p>data-musicApi属性：自定义播放API接口，接口已嵌入默认接口【选填】</p>

<p>示例代码：</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"  data-musicApi="musicapi.cenguigui.cn"&gt;&lt;/div&gt;
</code></pre></div></div>

<p>data-songChart属性：获取网易云歌榜【热歌榜（默认歌榜）， 新歌榜，飙升榜，原创榜，黑胶vip热歌榜，说唱榜，古典榜，韩语榜，日语榜，国风榜，中文DJ榜，网络热歌榜，蛋仔派对听歌榜】，每周二0:20每个歌榜更新100首音乐，vip歌曲自动跳过【选填】</p>

<p>示例代码：</p>

<p>如果你啥也不添加那就是默认的热歌榜的音乐，下面是更换新歌榜音乐</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"  data-songChart="新歌榜"&gt;&lt;/div&gt;
</code></pre></div></div>

<p>data-songList属性：获取网易云歌单音乐，如果你发现歌曲播放不了那肯定是VIP歌曲，支持动态更新 data-songList=”歌单ID”【选填】</p>

<p>示例代码：</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"  data-songList="2192163086"&gt;&lt;/div&gt;
</code></pre></div></div>

<p><strong>本地音乐属性配置</strong></p>

<p>data-localMusic属性：本地音乐，填写 playlistData.json 文件路径【本地音乐必填】</p>

<p>示例代码：</p>

<p>注意引入的是playlistData.json文件的路径</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div id="gui-MusicPlayer"  data-localMusic="playlistData.json"&gt;&lt;/div&gt;
</code></pre></div></div>



      
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
    <script>anchors.add();</script>

    <!-- 音乐播放器 -->
		<!--注释，加载热歌榜，设置cdn引入的路径，选择播放器颜色，随机播放歌曲，让播放器淡出-->
		<div id="gui-MusicPlayer" data-songChart="黑胶vip热歌榜" data-cdnName="https://y.cenguigui.cn/js" data-themeColor="gui-wineRed" data-random="true" data-fadeOutAutoplay></div>
		<script src="https://y.cenguigui.cn/js/gui-MusicPlayer/js/gui-MusicPlayer.js"></script>
  </body>
</html>
